<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="bp" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>消耗品管理</title>
    <!-- Bootstrap Styles-->
    <link href="${bp}/static/assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="${bp}/static/assets/css/font-awesome.css" rel="stylesheet" />
    <!-- Morris Chart Styles-->
    <link href="${bp}/static/assets/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
    <!-- Custom Styles-->
    <link href="${bp}/static/assets/css/custom-styles.css" rel="stylesheet" />
    <!-- Google Fonts-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
    <link rel="stylesheet" href="${bp}/static/assets/js/Lightweight-Chart/cssCharts.css">
</head>

<body>
<div id="wrapper">
    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="${bp}/user/index">
                <strong>蓝天洗衣管理系统</strong>
            </a>

            <div id="sideNav" href="">
                <i class="fa fa-caret-right"></i>
            </div>
        </div>

        <ul class="nav navbar-top-links navbar-right">
            <!-- /.dropdown -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                    <i class="fa fa-bell fa-fw"></i>

                    <c:if test="${orderconet > 0}">
                        <span class="badge" style="color: red">${orderconet}</span>
                    </c:if>
                    <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-alerts">
                    <li>
                        <a href="${bp}/order/orderAll">
                            <c:if test="${orderconet > 0}">
                                <i class="fa fa-comment fa-fw"></i>${orderconet}个订单等待您处理
                            </c:if>
                        </a>
                    </li>
                </ul>
                <!-- /.dropdown-alerts -->
            </li>
            <!-- /.dropdown -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                    <i class="fa fa-user fa-fw"></i>
                    <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">

                    <li>
                        <a href="${bp}/user/userInfo">
                            <i class="fa fa-user fa-fw"></i> 用户信息</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="${bp}/user/loginOut">
                            <i class="fa fa-sign-out fa-fw"></i> 退出系统</a>
                    </li>
                </ul>
                <!-- /.dropdown-user -->
            </li>
            <!-- /.dropdown -->
        </ul>
    </nav>
    <!--/. NAV TOP  -->
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">
                <li>
                    <a href="${bp}/user/index">
                        <i class="fa fa-dashboard"></i>首页</a>
                </li>
                <li>
                    <a href="${bp}/user/user?page=1">
                        <i class="fa fa-dashboard"></i>用户管理</a>
                </li>
                <li>
                    <a href="${bp}/order/order">
                        <i class="fa fa-qrcode"></i>订单管理</a>
                </li>
                <li>
                    <a class="active-menu" href="${bp}/equipment/equipment?page=1">
                        <i class="fa fa-desktop"></i>消耗品管理</a>
                </li>
                <li>
                    <a href="${bp}/log/log">
                        <i class="fa fa-bar-chart-o"></i>日志记录</a>
                </li>
                <li>
                    <a href="${bp}/work/work?page=1">
                        <i class="fa fa-table"></i>职员管理</a>
                </li>
            </ul>

        </div>

    </nav>
    <!-- /. NAV SIDE  -->

    <div id="page-wrapper">
        <div class="header">
            <h1 class="page-header">
                消耗品管理
                <small>欢迎您，${sessionScope.user.name}</small>
            </h1>
            <ol class="breadcrumb">
                <li>
                    <a href="#">消耗品管理</a>
                </li>
            </ol>

        </div>
        <div id="page-inner">

            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                添加
            </button>

            <%-- 注册 模块--%>
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title" id="myModalLabel">新增消耗品</h4>
                        </div>
                        <div class="modal-body">
                            <form id="staffModel" >
                                <div class="form-group">
                                    <label for="name">消耗品名字</label>
                                    <input type="text" class="form-control" id="name" name="equipmentName" placeholder="请输入名称">
                                </div>
                                <div class="form-group">
                                    <label for="username">采购数量</label>
                                    <input type="text" class="form-control" id="username" name="status" placeholder="请输入数量">
                                </div>
                                <div class="form-group">
                                    <label for="username">价格</label>
                                    <input type="text" class="form-control" id="password" name="money" placeholder="请输入单价">
                                </div>
                                <%--<button id="btn_submit" type="submit" class="btn btn-default">提交</button>--%>
                                <input  type="button" onclick="add()" class="btn btn-default" value="确认"/>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                        </div>
                    </div>
                </div>
            </div>



            <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>名字</th>
                    <th>库存</th>
                    <th>价格</th>
                    <th width="25%">领取数量</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${equipment.list}" var="keyword" varStatus="id">
                    <tr>
                        <td>${id.index+1}</td>
                        <td>${keyword.equipmentName}</td>
                        <td>${keyword.status}瓶</td>
                        <td>${keyword.money}元</td>
                        <td><div class="row">
                            <div class="col-lg-6">
                                <div class="input-group">
                                     <span class="input-group-btn">
                                       <button class="btn btn-default" onclick="start(${keyword.id})" type="button">-</button>
                                     </span>
                                           <input  id="jian${keyword.id}" type="text" class="form-control" placeholder="0">
                                           <span class="input-group-btn">
                                       <button class="btn btn-default" onclick="end(${keyword.id})" type="button">+</button>
                                     </span>
                                </div>
                            </div>
                        </div></td>
                        <td><button onclick="get(${keyword.id})">领取</button><button onclick="deletee(${keyword.id})">删除</button></td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            <ul class="pagination">
                <li><a href="#">&laquo;</a></li>
                <li><a href="${bp}/equipment/equipment?page=1">1</a></li>
                <li><a href="${bp}/equipment/equipment?page=2">2</a></li>
                <li><a href="${bp}/equipment/equipment?page=3">3</a></li>
                <li><a href="${bp}/equipment/equipment?page=4">4</a></li>
                <li><a href="${bp}/equipment/equipment?page=5">5</a></li>
                <li><a href="#">&raquo;</a></li>
            </ul>
        </div>
        <!-- /. PAGE INNER  -->
    </div>
    <!-- /. PAGE WRAPPER  -->
</div>
<!-- /. WRAPPER  -->
<!-- JS Scripts-->
<!-- jQuery Js -->
<script src="${bp}/static/assets/js/jquery-3.2.1.min.js"></script>
<!-- Bootstrap Js -->
<script src="${bp}/static/assets/js/bootstrap.min.js"></script>

<!-- Metis Menu Js -->
<script src="${bp}/static/assets/js/jquery.metisMenu.js"></script>
<!-- Morris Chart Js -->
<script src="${bp}/static/assets/js/morris/raphael-2.1.0.min.js"></script>
<script src="${bp}/static/assets/js/morris/morris.js"></script>


<script src="${bp}/static/assets/js/easypiechart.js"></script>
<script src="${bp}/static/assets/js/easypiechart-data.js"></script>

<script src="${bp}/static/assets/js/Lightweight-Chart/jquery.chart.js"></script>

<!-- Custom Js -->
<script src="${bp}/static/assets/js/custom-scripts.js"></script>

<script>
</script>

</body>
<script type="text/javascript">

    function start(id) {
        var star = $("#jian"+id).val();
        if(!star == 0) {
            $("#jian"+id).val(star - 1)
        }
    }
    function end(id) {
        var star = $("#jian"+id).val();
        $("#jian"+id).val(parseInt(star)+1)
    }

    function add(){
        $.ajax({
            type:"get",
            url:"${bp}/equipment/add",
            data: $('#staffModel').serialize(),
            success : function (msg) {
                if(msg == 1){
                    alert("库存录入成功")
                    window.location.reload()
                }
                if(msg == 2){
                    alert("库存录入失败")
                    window.location.reload()
                }

            }
        })

    }


    function get(id){


        var a = $("#jian"+id).val()
        if(a == null || a == ""){
            alert("不能为空")
            return false
        }
        if (a < 0){
            alert("不能小于0")
            return false
        }


            $.ajax({
                type:"get",
                url:"${bp}/equipment/updateNumber",
                data:{"id":id,"nmeber":a},
                success : function (msg) {
                    if(msg == 1){
                        alert("领取成功")
                        window.location.reload()
                    }
                    if(msg == 2){
                        alert("领取失败")
                        window.location.reload()
                    }
                    if(msg == 3){
                        alert("库存不足")
                        window.location.reload()
                    }
                }
            })



    }


    function deletee(id) {
        $.ajax({
            type:"get",
            url:"${bp}/equipment/delete",
            data:{"id":id},
            success : function (msg) {
                if(msg == 1){
                    alert("删除成功")
                    window.location.reload()
                }
                if(msg == 2){
                    alert("删除失败")
                    window.location.reload()
                }

            }
        })


    }
</script>
</html>